<template>
  <div v-if="couponList.length <= 0" class="no">
    <img src="~@/assets/imgs/coupon-list/no-coupon.png" class="img" />
    <div class="text-no">No coupons</div>
  </div>
  <!--优惠券列表-->
  <ul v-else class="coupon_list">

    <li v-for="coupon in couponList" :class="couponStatusCls(coupon.useStatus)" @click="useCoupon(coupon)">
      <div class="left">
        <div class="amount">{{ coupon.discountAmount }}</div><!--面额-->
        <div class="unit">PHP</div>
      </div>

      <div class="right">
        <div class="coupon_type">{{ coupon.discountCouponType | couponType }}</div><!--优惠券类型-->
        <div class="due_date">Due Date {{ coupon.dueTime | formatDate('MM-dd-yyyy') }}</div><!--到期时间-->
        <div class="use_warp" v-if="coupon.useStatus==='0'"><a href="javascript:void(0);">Unused</a></div>
      </div>
    </li>

  </ul>
</template>

<script src="./main.js"></script>

<style lang="scss">
[data-page=coupon-list] {

}
</style>
<style lang="scss" scoped>
@import "index";
</style>
